<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘抢购</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="qiang-nr"> <img src="TB1UfJnb3oQMeJjy0FpXXcTxpXa-160-44.png" alt="" class="qiang-logo"> <span class="shijian">距结束</span><span class="bian"><span class="hour">00</span>: <span class="min" id="min"></span>: <span class="miao" id="miao"></span></span>
    <div class="mo"> <span class="huan" id="btn">换一换</span> <a href=""><span class="more">更多></span></a> </div>
    <div id="list"></div>
<script>
    var daoji = document.querySelector(".qiang-nr .shijian .bian .min")
    var daoj = document.querySelector(".qiang-nr .shijian .bian .miao")
    var min = 14;
    var miao = 60;
    setInterval(function () {
        miao--;
        if (miao < 10) {
            miao = "0" + miao
        }
        document.getElementById("miao").innerHTML = miao;
        if (miao == 00) {
            miao = 60;
            min--;
            if (min < 10) {
                min = "0" + min
            }
            if (min == 0) {
                min = 14;
            }
        }
        document.getElementById("min").innerHTML = min;
    }, 1000)
    var page = 1;

    document.querySelector("#btn").addEventListener('click',function () {
        page++;
        if (page == 3){
            page = 1;
        }
        document.querySelector("#list").innerHTML = "";
        loadXMLDoc();
    })
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json = xmlhttp.responseText;
                json = JSON.parse(json);
                for(let i = 0;i<json.shop.length;i++){
                    console.log(json.shop[i]);
                    var img = document.createElement('img');
                    img.src = json.shop[i].pic;
                    var h4 = document.createElement('h4');
                    h4.innerHTML = json.shop[i].title;
                    var p = document.createElement('p');
                    p.innerHTML = json.shop[i].title2;
                    var span1 = document.createElement('span');
                    span1.innerHTML = json.shop[i].percentage;
                    var span2 = document.createElement('span');
                    span2.innerHTML = json.shop[i].letter;
                    var span3 = document.createElement('span');
                    span3.innerHTML = json.shop[i].price;
                    var span4 = document.createElement('span');
                    span4.innerHTML = json.shop[i].price2;
                    var div = document.createElement('div');
                    var div2 = document.createElement('div');
                    var div3 = document.createElement('div');
                    var div4 = document.createElement('div');
                    var div5 = document.createElement('div');
                    div5.style.width = json.shop[i].width;
                    var div6 = document.createElement('div');
                    var div7 = document.createElement('div');


                    div.classList.add('one');
                    div2.classList.add('img-a');
                    div3.classList.add('text');
                    div4.classList.add('progress');
                    div5.classList.add('progress-bar');
                    div6.classList.add('desc');
                    span1.classList.add('span1');
                    span2.classList.add('span2');
                    div7.classList.add('extra');
                    span3.classList.add('span3');
                    span4.classList.add('span4');




                    div2.appendChild(img);
                    div.appendChild(div2);
                    div.appendChild(div3);
                    div3.appendChild(h4);
                    div3.appendChild(p);
                    div4.appendChild(div5);
                    div3.appendChild(div4);
                    div3.appendChild(div6);

                    div6.appendChild(span1);
                    div6.appendChild(span2);
                    div3.appendChild(div7);
                    div7.appendChild(span3);
                    div7.appendChild(span4);



                    console.log(div);

                    document.querySelector("#list").appendChild(div);

                }
            }
        }
        xmlhttp.open("GET",page + ".json",true);
        xmlhttp.send();
    }
    loadXMLDoc();
</script>
</body>
</html>